<template>
  <div class="article">
    <div v-if="showIframe" class="iframe-modal">
      <div class="iframe-background" @click="closeIframe"></div>
      <div class="ad-container">
        <div class="close-btn" @click="closeIframe">
          <div class="close-btn-text"></div>
        </div>
        <iframe
          class="ad-iframe"
          src="https://tnaot.com/ad5.html"
          frameborder="0"
        ></iframe>
      </div>
    </div>

    <IndexHeader />
    <div class="container-m">
      <div class="news_title">
        <h1>{{ newsDetail.title }}</h1>
        <div class="news_info">
          <span>{{ newsDetail.author }}</span>
          <span>{{
            newsDetail.release_timestamp | dateFtt('yyyy-MM-dd hh:mm:ss')
          }}</span>
        </div>
      </div>
      <div class="news-content">
        <div
          class="ad-box"
          style=" width:auto; margin: 0 auto; text-align:center;"
        >
          <iframe
            frameborder="0"
            scrolling="no"
            style="width: 355px; height: 270px; overflow: hidden;  margin-left: 0px;  "
            class="ad-iframe"
            src="https://tnaot.com/adpcmr1.html"
          ></iframe>
        </div>

        <div class="vedio-content">
          <video
            width="100%"
            class="video-box"
            :src="newsDetail.video_url"
            :poster="newsDetail.thumbs && newsDetail.thumbs[0]"
            x5-playsinline
            webkit-playsinline
            playsinline
            x-webkit-airplay="allow"
            controls="controls"
            preload="auto"
          >
            {{ $t('Your_browser_does_not_support_video_hashtag') }}
          </video>
        </div>
      </div>

      <!-- 免责声明 -->
      <div class="liability-tip">
        <p class="liability-tip-label">{{ newsDetail.statementTitle }}</p>
        <p class="liability-tip-desc">{{ newsDetail.statement }}</p>
      </div>

      <Gather></Gather>
    </div>

    <div class="Recommend">
      <div class="Recommend-title">
        <h2>{{ $t('Best_recommend') }}</h2>
        <!-- banner -->
        <Banner
          v-if="JSON.stringify(banner) != '{}' && banner != null"
          :banner="banner"
        />
      </div>
      <!-- 列表 -->
      <Recommend :relatedList="relatedList" />
    </div>
  </div>
</template>

<script>
import IndexHeader from '@/components/m/Header.vue';
import Banner from '@/components/m/Banner.vue';
import Recommend from '@/components/m/Recommend.vue';
import Gather from '@/components/m/Gather.vue';
import { LRUcache } from '@/utils/lru_cache.js';

export default {
  components: {
    IndexHeader,
    Banner,
    Recommend,
    Gather
  },

  data() {
    return {
      newsDetail: {},
      showBanner: false, //是否显示金币提示
      banner: {}, //banner内容
      relatedList: [], //精彩推荐
      showIframe: true
    };
  },

  head() {
    const video = this.newsDetail;
    return this.$getVideoSeoHead(video);
  },
  mounted() {
    const that = this;
    this.randomNumber = new Date().getTime();
    setTimeout(() => {
      that.closeIframe();
    }, 4500);
  },
  methods: {
    closeIframe() {
      this.showIframe = false;
    }
  },
  async asyncData(ctx) {
    try {
      /* 404处理 */
      function toError() {
        ctx.error({
          statusCode: 404,
          message: 'Post not found'
        });
        return;
      }
      /* 有缓存，取缓存，无缓存，请求接口 */
      const id = ctx.params.id.replace(/\.html$/, '');
      let bannerObjData = LRUcache.get(
          `/${ctx.store.state.locale}/article/get_banner_channel?imageType=1`
        ),
        resultObjData = LRUcache.get(
          `/${ctx.store.state.locale}/article/get_news_detail?news_id=${id}&news_type=3`
        ),
        relatedObjData = LRUcache.get(
          `/${ctx.store.state.locale}/get_related_list/3/${id}`
        );
      let banner, resultObj, related;
      if (bannerObjData && bannerObjData.result) {
        banner = bannerObjData;
      } else {
        banner = await ctx.$axios.$get(
          `/article/get_banner_channel?imageType=1`
        );
        !banner.result && toError();
        LRUcache.set(
          `/${ctx.store.state.locale}/article/get_banner_channel?imageType=1`,
          banner
        );
      }
      if (resultObjData && resultObjData.result) {
        resultObj = resultObjData;
      } else {
        resultObj = await ctx.$axios.$get(
          `/article/get_news_detail?news_id=${id}&news_type=3`
        );
        !resultObj.result && toError();
        LRUcache.set(
          `/${ctx.store.state.locale}/article/get_news_detail?news_id=${id}&news_type=3`,
          resultObj
        );
      }
      if (relatedObjData && relatedObjData.result) {
        related = relatedObjData;
      } else {
        related = await ctx.$axios.$get(
          `/article/get_related_list?news_id=${id}&news_type=3`
        );
        !related.result && toError();
        LRUcache.set(
          `/${ctx.store.state.locale}/get_related_list/3/${id}`,
          related
        );
      }
      return {
        newsDetail: resultObj.result,
        showBanner: banner.result.isOpenCoin,
        banner: banner.result.banner_list,
        relatedList: related.result
      };
    } catch (err) {
      ctx.error({ statusCode: 404, message: '网络异常，请重试！' });
    }
  }
};
</script>

<style lang="scss" scoped>
.article {
  .liability-tip {
    color: rgba(12, 12, 28, 0.7);
    margin: 0 0 20px 0;
  }

  .liability-tip-label {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 8px 0;
  }

  .liability-tip-desc {
    font-size: 24px;
    line-height: 1.6;
  }

  .video-box {
    max-height: 800px;
  }

  .vedio-content {
    padding: 15px 0 20px 0;
  }
}
.iframe-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  .ad-container {
    width: 150%;
    height: 1111px;
    // background: white url('~assets/images/download_app.png') center/cover
    //   no-repeat;
    position: relative;
    z-index: 1;
    cursor: pointer;
    .ad-iframe {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
      height: 100%;
      background-color: #fff;
    }

    .close-btn {
      position: absolute;
      bottom: -8px;
      right: 50%;
      margin-left: 30px;
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      background: rgba(0, 0, 0, 0);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      cursor: pointer;
      z-index: 2;
    }

    .ad-content {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
